<?php

use yii\helpers\Html;


/* @var $this yii\web\View */
/* @var $model backend\modules\pooai\models\ZpooaiPages */

$this->title = Yii::t('app', '修改商品');
$this->params['breadcrumbs'][] = ['label' => Yii::t('app', '商品管理'), 'url' => ['index']];
$this->params['breadcrumbs'][] = $this->title;
$this->registerCssFile('@web/css/admin.css');
$this->registerCssFile('@web/css/jquery.dad.css');
$this->registerJsFile('@web/js/jquery.dad.min.js');
$this->registerJsFile('@web/js/echo.js');
?>
<div class="zpooai-pages-create" style="background-color: white;width: 100%;height: 100%;">
    <div class="zpooai-pages-form" >
        <div class="nav-ul-li">
            <ul class="nav-ul">
                <li id="aPage01" class="nav-li nav-li-active" style="margin-left:0px !important;">
                    <a  data-toggle="tab"><i class="glyphicon glyphicon-th-large"></i>基本信息</a>
                </li>
                <li id="aPage02" class="nav-li" >
                    <a  data-toggle="tab"><i class="glyphicon glyphicon-edit"></i>商品属性</a>
                </li>
                <li id="aPage03" class="nav-li" style="width: 160px">
                    <a  data-toggle="tab"><i class="glyphicon glyphicon-edit"></i>商品详细描述</a>
                </li>
                <li id="aPage04" class="nav-li">
                    <a data-toggle="tab"><i class="glyphicon glyphicon-edit"></i>主图图片</a>
                </li>
                <li id="aPage05" class="nav-li">
                    <a data-toggle="tab"><i class="fa fa-file-image-o"></i>详情描述图</a>
                </li>
            </ul>
        </div>

        <div class="page-data-form" >
            <?= $this->render('_form', [
                'model' => $model,
                'GoodsDescImages'=>$GoodsDescImages,
                'GoodsGallImages'=>$GoodsGallImages,
                'FormPage'=>$FormPage
            ]) ?>
        </div>
    </div>
</div>

<script>
    $('.nav-li').mouseover(function(){
        $(this).css('background-color','rgb(250,250,250)')
    });
    $('.nav-li').mouseout(function(){
        $(this).css('background-color','rgb(245,245,245)')
    });
    $('.nav-li').click(function(){
        $('.nav-li').removeClass('nav-li-active');
        $(this).addClass('nav-li-active');

        var pageNumber = $(this)[0].id;
        if(pageNumber=='aPage01') {
            $('.FormPage05').css("display","none");
            $('.FormPage04').css("display","none");
            $('.FormPage03').css("display","none");
            $('.FormPage02').css("display","none");
            $('.FormPage01').css("display","block");
            $('#form-group-submit-btn').css("display","block");

        }  else if(pageNumber=="aPage02"){
            $('.FormPage05').css("display","none");
            $('.FormPage04').css("display","none");
            $('.FormPage03').css("display","none");
            $('.FormPage02').css("display","block");
            $('.FormPage01').css("display","none");
            $('#form-group-submit-btn').css("display","block");

        } else if(pageNumber=="aPage03"){
            $('.FormPage05').css("display","none");
            $('.FormPage04').css("display","none");
            $('.FormPage03').css("display","block");
            $('.FormPage02').css("display","none");
            $('.FormPage01').css("display","none");
            $('#form-group-submit-btn').css("display","block");

        }else if(pageNumber=="aPage04"){
            $('.FormPage05').css("display","none");
            $('.FormPage04').css("display","block");
            $('.FormPage03').css("display","none");
            $('.FormPage02').css("display","none");
            $('.FormPage01').css("display","none");
            $('#form-group-submit-btn').css("display","none");

        }else if(pageNumber=="aPage05"){
            $('.FormPage05').css("display","block");
            $('.FormPage04').css("display","none");
            $('.FormPage03').css("display","none");
            $('.FormPage02').css("display","none");
            $('.FormPage01').css("display","none");
            $('#form-group-submit-btn').css("display","none");

        }

    });

    var FormPageType= $('#FormPageType').val();
    switch (FormPageType){
        case 'FormPage01':
            $('.nav-li').removeClass('nav-li-active');
            $('#aPage01').addClass('nav-li-active');
            $('.FormPage05').css("display","none");
            $('.FormPage04').css("display","none");
            $('.FormPage03').css("display","none");
            $('.FormPage02').css("display","none");
            $('.FormPage01').css("display","block");
            $('#form-group-submit-btn').css("display","block");
            break;
        case 'FormPage02':
            $('.nav-li').removeClass('nav-li-active');
            $('#aPage02').addClass('nav-li-active');
            $('.FormPage05').css("display","none");
            $('.FormPage04').css("display","none");
            $('.FormPage03').css("display","none");
            $('.FormPage02').css("display","block");
            $('.FormPage01').css("display","none");
            $('#form-group-submit-btn').css("display","block");
            break;
        case 'FormPage03':
            $('.nav-li').removeClass('nav-li-active');
            $('#aPage03').addClass('nav-li-active');
            $('.FormPage05').css("display","none");
            $('.FormPage04').css("display","none");
            $('.FormPage03').css("display","block");
            $('.FormPage02').css("display","none");
            $('.FormPage01').css("display","none");
            $('#form-group-submit-btn').css("display","block");
            break;
        case 'FormPage04':
            $('.nav-li').removeClass('nav-li-active');
            $('#aPage04').addClass('nav-li-active');
            $('.FormPage05').css("display","none");
            $('.FormPage04').css("display","block");
            $('.FormPage03').css("display","none");
            $('.FormPage02').css("display","none");
            $('.FormPage01').css("display","none");
            $('#form-group-submit-btn').css("display","none");
            break;
        case 'FormPage05':
            $('.nav-li').removeClass('nav-li-active');
            $('#aPage05').addClass('nav-li-active');
            $('.FormPage05').css("display","block");
            $('.FormPage04').css("display","none");
            $('.FormPage03').css("display","none");
            $('.FormPage02').css("display","none");
            $('.FormPage01').css("display","none");
            $('#form-group-submit-btn').css("display","none");
            break;
    }



    /**
     * 图片排序Ajax请求
     */
    function toPostAjax(conArray)
    {
        conArray = JSON.stringify(conArray);
        console.log(conArray)
        $.ajax({
            url: '?r=goods/goods/sort',
            type: 'post',
            data: conArray,
            success: function (data) {
                // do something
            }
        });
    }
</script>

<script>
    //下拉选中事件
    var attrCatId = $('#goods-attr_cat_id').val();
    var goods_id  = $('#goods-goods_id').val();
    var csrf  = $('#csrf').val();
    attrAjax(attrCatId);
    $('#goods-attr_cat_id').change(function(self){
        var value = self.target.value;
        attrAjax(value);
    })

    function attrAjax(value)
    {
        $.ajax({
            url: '?r=goods/goods/attriall',
            type: 'post',
            data: {_csrf:csrf,attr_cat_id:value,goods_id:goods_id},
            success: function (data) {
                var massage = eval('('+data+')');

                if(massage[0]){
                    var html = '';
                    var len = massage[1].length;console.log(massage[1])
                    for(var i=0;i<len;i++){
                        html +='<h1>'+massage[1][i].attr_name+'</h1>';
                        var children = massage[1][i].children;
                        var clen = children.length;
                        for(var j=0;j<clen;j++){
                            if(children[j].check  ==1 ){
                                html += '<input name="Attrs['+children[j].attr_id+']" type="radio" value="'+children[j].attr_value_id+'" checked >'+children[j].attr_value_name;
                            }else{
                                html += '<input name="Attrs['+children[j].attr_id+']" type="radio" value="'+children[j].attr_value_id+'">'+children[j].attr_value_name;
                            }
                        }
                    }
                }

                $('#attribute-attrValue').html(html);
            }
        });
    }

</script>

